<template>
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" width="100%" height="170vh" />
        </van-swipe-item>
    </van-swipe>
    <!-- 快捷入口 -->
    <van-grid :column-num="5" :border="false" icon-size="40px">
        <!-- url 和to的关系 url是跳转到 外连接 to 是跳转到 本地路由上-->
        <van-grid-item v-for="value in gridIcon" :key="value" :icon="value.icon" :text="value.name" :to="value.url" />
    </van-grid>

    <!--视频文章-->
    <div class="video-word">
        <div class="video-content" v-for="item in videoData" :key="item.id"  @click="onVideoplay(item.id)">
            <div style="font-size: 15px; font-weight: 800; padding-left: 2px; padding-bottom: 10px;">{{ item.vname }}</div>

            <img :src="item.vimg" width="100%" height="200" alt="">
           
                <van-icon name="play-circle" size="40px" class="icons"/>
            
            <van-row style="margin-top: 3px; margin-bottom: 15px; font-size: 13px; color: #999999;">
                <van-col span="6" style="text-align: center;">{{item.username}}</van-col>
                <van-col span="6">{{item.count}}万次播放</van-col>
                <van-col span="12">{{item.createtime}}</van-col>
            </van-row>
        </div>

    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
//引入 axios插件
// import axios from 'axios'
import { CarVideosApi } from '../api';

const images = ref([
    'https://p1-dcd.byteimg.com/img/tos-cn-i-dcdx/7af81167568f4f3c881dbdb86996bb51~tplv-dcdx-default:0:0.png',
    'https://p1-dcd.byteimg.com/img/tos-cn-i-dcdx/de52de74a7b34915bdc9fb9b1fd94fa8~tplv-dcdx-default:0:0.png',
    'https://p1-dcd.byteimg.com/img/tos-cn-i-dcdx/fc85e118e6df4107b5e8fb827fc58b3d~tplv-dcdx-default:0:0.png'
])

// tabbar 快捷入口
const gridIcon = ref([
    { id: 1, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/car-91669090d3a0ab0d9a2a..png', name: '车型大全', url: 'https://m.dongchedi.com/auto/library/x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x?browser_coop=&link_source=undefined' },
    { id: 2, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/car-91669090d3a0ab0d9a2a..png', name: '排行榜', url: '/toplist' },
    { id: 3, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/car-91669090d3a0ab0d9a2a..png', name: '车友圈' },
    { id: 4, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/car-91669090d3a0ab0d9a2a..png', name: '二手车' },
    { id: 5, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/car-91669090d3a0ab0d9a2a..png', name: '条件选车' },

])
const videoData = ref([
    { id: 1, title: '刹车比元PLUS还好？7万起比亚迪元UP再评测', imgUrl: 'https://p9-dcd-sign.byteimg.com/motor-img/1a7554f8dce94e95b889296fffb82728~tplv-resize:640:0.image?lk3s=0bff8f5f&x-expires=1764554278&x-signature=PCtO0KQwBYlBVAiOSwg1dWw3fAk%3D&psm=motor.content.packer&biz_tag=motorimage',vname:'三驱兄弟',vplay:'100',vtime:'2025-11-01' },
    { id: 2, title: '想要省钱代步神车？10万以内，这些小车最有性价比！', imgUrl: 'https://p9-dcd-sign.byteimg.com/motor-article-img/3330d1c5f19249ae80ec7cc07dbfe5f7~tplv-resize:640:0.image?lk3s=0bff8f5f&x-expires=1764569727&x-signature=NqyoZ7o5mfLRpuvO3x9M8S02M2A%3D&psm=motor.content.packer&biz_tag=motorimage',vname:'王成佛半山木屋',vplay:'3.6',vtime:'2025-11-01'  }
])


//当页面加载的时候立即加载我的数据 ， 需要采用渲染生命周期
onMounted(()=>{
    CallVidesApi()
})


//构建一个函数
const CallVidesApi=()=>{
    // axios.get('http://localhost:8081/api/videos').then(res=>{
    //     console.log(res);
        
    // })
    CarVideosApi.select.call().then(res=>{
        console.log(res);
        // 轮播图数据加载
        images.value = res.map(item => item.vimg)
        //视频文件数据展示
        videoData.value = res
    })
}

//点击跳转到详情页内
const onVideoplay =(id)=>{
    console.log(id);
     router.push({path:'/videodetail',query:{id}})
    //  router.push({name:'videodetail',params:{id:id}})

    
}
</script>

<style scoped>
.van-grid-item {
    cursor: pointer;
}


.video-word {
    margin-bottom: 80px;
}
.icons{
    position: absolute;
    left: 200px;
    margin-top: 75px;
}
</style>